<template>
  <div>
    <!-- <el-tree :data="numes" :props="defaultProps" node-key="id" @node-click="handleNodeClick">

    </el-tree> -->

    <!-- <el-tree
      :data="numes"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      :render-content="renderContent"
    >
    </el-tree> -->
    <el-tree
      :data="numes"
      node-key="catId"
      show-checkbox
      :expand-on-click-node="false"
      :default-expanded-keys="keys"
      @node-expand="updatekeys"
      :accordion="true"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ data.name }}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            v-if="node.level !== 3"
            @click="() => save(node, data)"
          >
            Append
          </el-button>
          <el-button type="text" size="mini" @click="() => update(node, data)">
            edit
          </el-button>

          <el-button
            type="text"
            size="mini"
            v-if="node.level === 3 || data.children.length <= 0"
            @click="() => remove(node, data)"
          >
            Delete
          </el-button>
        </span>
      </span>
    </el-tree>

    <div>
      <el-dialog
        title="新增品类"
        :visible.sync="add"
        :center="true"
        :destroy-on-close="true"
        @close="defaultCategroy = {name:'',sort:0}"
      >
        <el-form :model="defaultCategroy" label-width="100px">
          <el-form-item label="名称" prop="name" required="true">
            <el-input
              v-model="defaultCategroy.name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="add = false">取 消</el-button>
          <el-button type="primary" @click="append(defaultCategroy)"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>

    <div>
      <el-dialog
        title="修改品类"
        :visible.sync="updateCategroy"
        :center="true"
        :destroy-on-close="true"
        @close="defaultCategroy = {name:'',sort:0}"
      >
        <el-form :model="defaultCategroy" label-width="100px">
          <el-form-item label="名称" prop="name" required="true">
            <el-input
              v-model="defaultCategroy.name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="sort" required="true">
          
            <el-input-number v-model="defaultCategroy.sort" :min="0" :max="10" label="排序"></el-input-number>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updateCategroy = false">取 消</el-button>
          <el-button type="primary" @click="updateOk(defaultCategroy)"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import values from "lodash/values";
import request from "../../../utils/httpRequest";

export default {
  data() {
    return {
      add: false,
      updateCategroy: false,
      numes: [],
      keys: [23],
      categroy: {
        name: "",
        parentCid: undefined,
        catLevel: undefined,
        showStatus: 1,
        sort: 0,
        icon: "",
        productUnit: "元",
        productCount: 0
      },

      defaultCategroy: {
        name: "",
        sort: 0
      },
      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  },
  mounted() {},
  methods: {
    update(node, data) {
      this.updateCategroy = true;
      // this.defaultCategroy = { ...this.categroy };
      this.defaultCategroy.name = data.name;
      this.defaultCategroy.sort = data.sort;
      this.defaultCategroy.catId = data.catId;
    },
    updateOk() {
      request({
        method: "post",
        url: this.$http.adornUrl("/product/category/update"),
        data: { ...this.defaultCategroy }
      }).then(t => {
        if (t.data.code === 0) {
          this.mumesList();
          this.keys = [this.defaultCategroy.catId];
          console.log("updateOk", this.defaultCategroy);
          this.updateCategroy = false;
          this.$message({
            message: "修改成功",
            type: "success"
          });
        }
      });
    },
    updatekeys(data, node, t) {
      console.log("aaa");
      console.log(node, data, t);
      this.keys = [data.catId];
    },
    save(node, data) {
      console.log(node, data);
      this.add = true;
      this.defaultCategroy = { ...this.categroy };
      this.defaultCategroy.parentCid = data.catId;
      this.defaultCategroy.catLevel = data.catLevel + 1;
    },
    handleNodeClick(data) {
      console.log(data);
    },
    mumesList() {
      request({
        method: "get",
        url: this.$http.adornUrl("/product/category/list/tree"),
        params: {}
      }).then(data => {
        this.numes = [...data.data.data];
        console.log(this.numes);
      });
    },
    append(data) {
      request({
        method: "post",
        url: this.$http.adornUrl("/product/category/save"),
        data: { ...this.defaultCategroy }
      }).then(t => {
        if (t.data.code === 0) {
          this.mumesList();
          this.keys = [this.defaultCategroy.parentCid];
          console.log("this.defaultCategroy", this.defaultCategroy);
          this.add = false;
          this.$message({
            message: "新增成功",
            type: "success"
          });
        }
      });
    },

    remove(node, data) {
      this.$confirm(`此操作将永久删除${data.name}, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          request({
            method: "post",
            url: this.$http.adornUrl("/product/category/delete"),
            data: [data.catId]
          }).then(t => {
            console.log(t);
            if (t.data.code === 0) {
              this.mumesList();
              this.keys = [node.parent.data.catId];
              // this.keys.push(data.catId);
              console.log(data.catId, this.keys);
              this.$message({
                message: "删除成功",
                type: "success"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });

      console.log(node, data);
    }
  },
  created() {
    console.log(this.keys);
    this.mumesList();
  }
};
</script>
<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
